<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="牧中智慧畜牧大数据云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link rel="stylesheet" href="/webjars/js/layui/css/layui.css" media="all">
    <title>牧中智慧畜牧大数据云平台V1.0</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

</head>
<body style="background-color:#fff">
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(2)"/>

<!--平台管理菜单-->
<div id="topnav" th:replace="management/partial/topnav :: topnav(2)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="management/partial/factory_left:: nav(3)"/>
    <div id="context" data-toggle="context" data-target="#context-menu">
        <div class="page-aside app tree">
            <div class="fixed nano nscroller">
                <div class="content">
                    <div class="header">
                        <button class="navbar-toggle" data-target=".treeview" data-toggle="collapse" type="button">
                            <span class="fa fa-chevron-down"></span>
                        </button>
                        <h2 class="page-title">行政区域</h2>
                        <p class="description">Administrative division</p>
                    </div>
                    <ul class="nav nav-list treeview collapse">
                        <li><label class="tree-toggler nav-header" id="city"><i class="fa fa-folder-o"></i> 上海市</label>
                            <ul class="nav nav-list tree" th:each="area:${cityList}">
                                <li>
                                    <label class="tree-toggler nav-header" id="region"
                                           th:onclick="'javascript:subordinate('+${area.areaCode}+')'"><i
                                            class="fa fa-folder-o"></i>
                                        <span th:id="${area.areaCode}" th:value="${area.areaCode}"
                                              th:text="${area.areaName}" level="2"></span>
                                    </label>
                                    <ul class="nav nav-list tree"></ul>
                                </li>

                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-6" style="margin-left: 300px;margin-top: 70px">
        <div class="header">
            <h3>添加区域信息</h3>
        </div>
        <div class="content">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="areaUp" class="col-sm-2 control-label">上级区域</label>
                    <div class="col-sm-10">
                        <input id="areaCode" value="" hidden="hidden"/>
                        <input id="areaLevel" value="" hidden="hidden"/>
                        <input type="text" class="form-control" readonly="readonly" id="areaUp"
                               placeholder="请点击左侧选择上级区域">
                    </div>
                </div>
                <div class="form-group">
                    <label for="areaName" class="col-sm-2 control-label">区域名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="areaName" placeholder="区域名称">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" id="butAdd" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="context-menu2">
        <ul class="dropdown-menu" role="menu">
           <!-- <li><a tabindex="-1">添加新节点</a></li>
            <li><a tabindex="-1">添加子节点</a></li>
            <li><a tabindex="-1">删除</a></li>
            <li><a tabindex="-1">重命名</a></li>-->
        </ul>
    </div>
</div>
<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript"
        src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/bootstrap-contextmenu/0.3.4/bootstrap-contextmenu.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //initialize the javascript
        App.init();
        binding();

        $("#butAdd").click(function() {
            var areaCode = $("#areaCode").val();
            var name = $("#areaName").val();
            var areaUp = $("#areaUp").val();
            var areaLevel = $("#areaLevel").val();
            layui.use(['laypage', 'layer'], function () {
                var $ = layui.jquery, layer = layui.layer;


                if (name == "") {
                    alert('请输入地区名称');
                    return false;
                }
                if (areaCode == "") {
                    alert('请选择上级区域');
                    return false;
                }
                layer.confirm('确认要添加'+name+'到'+areaUp+'下面吗?', {
                    btn: ['确认', '取消']

                }, function (index, layero) {

                    $.ajax({
                        type: "GET",
                        url: "/management/organization/areaAdd",
                        data: {
                            areaCode: areaCode,
                            level: areaLevel,
                            name: name
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                layer.msg('添加成功!', {icon: 1, time: 2000,});
                                window.location.reload();
                            } else {
                                layer.msg('添加失败!', {icon: 1, time: 2000,});
                            }
                        }
                    });

                }, function (index) {
                    layer.close();
                });
            })

        })

    });
</script>
<script type="text/javascript">
    // Demo 3
    var demo;
    $('#context').contextmenu({
        target: '#context-menu2',
        before: function (e) {
            demo = $(e.target);
        },
        onItem: function (context, e) {
            if ($(e.target).text() == '添加新节点') {
                if (demo.get(0).tagName == 'A') {
                    demo.parent().after("<li><a href='#'>新节点</a></li>");
                } else {
                    demo.parent().parent().after("<li><a href='#'>新节点</a></li>");
                }

            } else if ($(e.target).text() == '添加子节点') {
                if (demo.get(0).tagName == 'A') {
                    demo.after("<ul class='nav nav-list tree'></ul>");
                    var demo2 = demo.next();
                    demo.parent().prop("class", "open");
                    var str = "<label class='tree-toggler nav-header'><i class='fa fa-folder-open-o'></i>" + demo.text() + "</label>";
                    $(str).replaceAll(demo);
                    demo2.append("<li><a href='#'>新节点</a></li>");
                    binding();
                } else {
                    demo.next().append("<li><a href='#'>新节点</a></li>");
                }
            } else if ($(e.target).text() == '删除') {
                if (demo.get(0).tagName != "A") {
                    alert("非空");
                } else {
                    var demo4 = demo.parent();
                    var demo2 = demo.parent().parent().prev();
                    var demo3 = demo.parent().parent().parent();
                    demo.parent().remove();
                    if (demo2.next().children().length == 0) {
                        demo2.next().remove();
                        demo2.children("input:first-child").remove();
                        var str = demo2.text();
                        demo3 = "<a href='#'>" + str + "</a>";
                        $(demo3).replaceAll(demo2);
                    }
                }
            } else {
                var name = prompt("请输入名字", "")
                if (name != null && name != "") {
                    if (demo.get(0).tagName == 'A') {
                        demo.text(name);
                    } else {
                        demo.text(name);
                        demo.prepend("<i class='fa fa-folder-open-o'></i>");
                    }

                }
            }


        }
    });


    binding = function () {
        $('label.tree-toggler').unbind("click");
        $('label.tree-toggler').click(function () {
            var icon = $(this).children(".fa");
            if (icon.hasClass("fa-folder-o")) {
                icon.removeClass("fa-folder-o").addClass("fa-folder-open-o");
            } else {
                icon.removeClass("fa-folder-open-o").addClass("fa-folder-o");
            }

            $(this).parent().children('ul.tree').toggle(300, function () {
                $(this).parent().toggleClass("open");
                $(".tree .nscroller").nanoScroller({preventPageScrolling: true});
            });

        });
    }

    function subordinate(id) {
        var demo = $("#" + id);
        var areaCode = id;
        $("#areaCode").val(id);
        $("#areaUp").val(demo.text());
        var lev = demo.attr("level");
        $("#areaLevel").val(lev);
        $.ajax({
            type: "GET",
            url: "/management/organization/subordinate",
            data: {
                areaCode: areaCode,
                level: lev
            },
            dataType: "json",
            success: function (data) {
                var demo2 = demo.parent().next();
                demo2.html("");
                $.each(data, function (index, item) {
                    /*<span th:value="${area.areaCode}" th:text="${area.areaName}" level="2"></span>*/
                    var str = "";
                    if (lev < 4) {
                        str += "<li><label class='tree-toggler nav-header' id='village' onclick='subordinate(" + item.areaCode + ")'>" +
                            "<i class='fa fa-folder-o'></i>" +
                            "<span id='" + item.areaCode + "' level='" + item.areaLevel + "'>" + item.areaName + "</span></label>" +
                            "<ul class='nav nav-list tree'>" +
                            "</ul></li>"
                    } else {
                        str += "<li> <a href='#' id='" + item.areaCode + "'  level='" + item.areaLevel + "'>" + item.areaName +
                            "</a></li>"
                    }
                    demo2.append(str);
                })
                binding();
            }
        });

    }



</script>

</body>
</html>
